<template>
  <el-dialog
    v-drag-dialog
    :title="title+'商品种类'"
    :visible.sync="dialogFormVisible"
    ref="tadlg"
    width="30%"
  >
    <el-form
      :rules="rules"
      ref="dataForm"
      :model="data"
      label-position="right"
      label-width="100px"
      size="small"
      style="width: 80%; margin-left:6px;"
    >
      <el-form-item label="种类ID：" prop="ProductKindID">
        <el-input v-model="data.ProductKindID" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="等级：" prop="KindLevel">
        <el-select v-model="data.KindLevel" :disabled="!isAdd" placeholder="请选择" style="width:100%;">
          <el-option
            v-for="item in levels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级：" prop="oneLevelID" v-if="isAdd && data.KindLevel==2">
        <el-select v-model="data.oneLevelID" placeholder="请选择" style="width:100%;">
          <el-option
            v-for="item in oneLevelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="种类名：" prop="KindName">
        <el-input placeholder="请输入" v-model="data.KindName"></el-input>
      </el-form-item>

      <el-form-item label="状态：" prop="KindState">
        <el-select v-model="data.KindState" placeholder="请选择" style="width:100%;">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="顺序：">
        <el-input placeholder="请输入" v-model="data.OrderNum"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancelAdd">取消</el-button>
      <el-button type="primary" :loading="isOking" @click="onSaveAdd">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { 
  getProductKindAddInitInfo,//url: '/Product/GetProductKindAddInitInfo'
  saveProductKind //url: '/Product/SaveProductKind' = 保存新增或修改的信息
 } from "@/api/product";
 import { findIndexByKeyValue } from "@/api/common";
export default {
  data() {
    return {
      isAdd:true,
      isOking:false,
      dialogFormVisible: false,
      title: "",
      data: {
        ProductKindID: 0,
        KindState: 1, //初始正常
        KindName: "",
        KindLevel: 1,//初始一级
        OrderNum: 0,
        oneLevelID:0,//选中的上级ID - 辅助
      },
      rules:{
        ProductKindID: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        KindState: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        KindName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        KindLevel: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        oneLevelID: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      oldData: "",
      levels: [
        {
          value: 1,
          label: "一级种类"
        },
        {
          value: 2,
          label: "二级种类"
        }
      ],
      states: [
        {
          value: 0,
          label: "隐藏"
        },
        {
          value: 1,
          label: "正常"
        }
      ],
      oneLevelList:[],//上级列表{label,value}
      nextOneLevelID:0,//下一个一级ID
      nextOneLevelOrder:0,
      nextTwoLevelIDList:[],//一级各级的二级下一个ID列表{one_level_id,next_two_level_id}
    };
  },
  created() {
    //JSON.parse(JSON.stringify(this.spAttribute))
    this.oldData = JSON.stringify(this.data);
  },
  watch:{
    'data.oneLevelID':function(nval){
      if(nval>0 && this.isAdd){//该级的二级下一个ID
        let index=findIndexByKeyValue(this.nextTwoLevelIDList,'one_level_id',nval);
        if(index>=0){
          this.data.ProductKindID=this.nextTwoLevelIDList[index].next_two_level_id;
          this.data.OrderNum=this.nextTwoLevelIDList[index].next_two_level_order;
        }
      }     
    },
    'data.KindLevel':function(nval){
      if(nval==1 && this.isAdd){
        this.data.ProductKindID=this.nextOneLevelID;
        this.data.OrderNum=this.nextOneLevelOrder;
      }
      if(nval==2){
        this.data.oneLevelID='';
        this.data.OrderNum='';
      }
    }
  },
  methods: {
    Add(type) {
      getProductKindAddInitInfo({type}).then(r=>{
        if(r.code==0){
          this.isAdd=true;
          this.nextOneLevelID=r.data.one_level_next_id;//保存一级的下一个ID
          this.nextOneLevelOrder=r.data.one_level_next_order;
          this.data.ProductKindID=this.nextOneLevelID;//使用一级的下一个ID
          this.data.OrderNum=this.nextOneLevelOrder;
          this.nextTwoLevelIDList=r.data.next_two_level_id_list;//一级的二级下一个ID列表
          this.oneLevelList=r.data.one_level_list;//一级种类列表{label,value}
        }else{
          this.$message.error('获取添加商品种类初始化信息出错！原因：'+r.msg);
        }
      });
      this.title = "登记新";
      this.data = JSON.parse(this.oldData);
      this.dialogFormVisible = true;
    },
    Edit(record) {
      //供上级调用
      this.isAdd=false;
      this.data = record;
      if(this.data.KindLevel==2){//准备上级 - 暂未启用
        this.data.oneLevelID=this.data.KindLevel/1000*1000;
      }
      this.title = "修改";
      this.dialogFormVisible = true;
    },
    onCancelAdd() {
      this.dialogFormVisible = false;
    },
    onSaveAdd() {
      this.$refs['dataForm'].validate(valid=>{
        if(valid){
          let msg=this.isAdd?'添加':'修改';
          let data={
            is_add:this.isAdd,
            record:this.data
          }
          this.isOking=true;
          saveProductKind(data).then(r=>{
            if(r.code==0){
              this.$emit('save-ok');
              this.$message(`${msg}商品种类成功!`);
              this.dialogFormVisible=false;
            }else{
              this.$message.error(`${msg}商品种类出错!原因:${r.msg}`);
            }
            this.isOking=false;
          });          
        }
      });
    }
  }
};
</script>